<template>
  <div class="summaryLog">
    <div class="summaryLog-top">
      <span class="datamet" @click="datyMent()">工作总结</span>&nbsp;&nbsp;>&nbsp;
      <span class="datalog" v-if="this.$route.query.type == 1">全部总结</span>
      <span class="datalog" v-if="this.$route.query.type == 2">未确认总结</span>
    </div>

    <div class="summaryLog_table">
      <div class="summaryLog_tableheader" v-if="this.$route.query.type == 1">
        <span>
          项目名称:
          <el-select v-model="projectId" clearable>
            <el-option v-for="item in this.projectList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </span>
        &#12288; &nbsp;
        <span>
          时间段：
          <el-select v-model="period" placeholder="全部" style="width: 220px">
            <el-option v-for="item in options" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </span>
        &#12288; &nbsp;
        <span>
          <el-button @click="seclet()" size="small" type="primary">查询</el-button>
        </span>
        <div style="margin-left: 20%">
          <span style="font-size: 22px">{{ this.name }}</span>&#12288; &nbsp;
          <span>{{ this.groupName }}</span>
        </div>
      </div>
      <div class="summaryLog_tableheader" v-if="this.$route.query.type == 2">
        职能组:
        <el-select v-model="fid" clearable @change="chengeFid()">
          <el-option v-for="item in groupsList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </div>
      <div class="summaryLog_tablebody">
        <el-table :data="tableData" border style="width: 90%">
          <el-table-column fixed type="index" label="序号" width="100" align="center">
          </el-table-column>
          <el-table-column prop="functionGroupName" label="职能组" width="150" align="center">
          </el-table-column>
          <el-table-column prop="submitterName" label="姓名" width="150" align="center">
          </el-table-column>
          <el-table-column prop="weekPartStr" label="计划日期" width="200" align="center">
          </el-table-column>
          <el-table-column prop="projectName" label="项目名称" width="150" align="center">
          </el-table-column>
          <el-table-column prop="pushTime" label="上报时间" width="150" align="center">
          </el-table-column>
          <el-table-column prop="weekPlanMsg" label="工作内容" width="400" align="left">
          </el-table-column>
          <el-table-column prop="projectPercentage" label="完成百分比" width="150" align="center">
          </el-table-column>
          <el-table-column prop="workState" label="工作状态" width="150" align="center">
          </el-table-column>
          <el-table-column prop="weekSummaryMsg" label="总结" width="150" align="center">
          </el-table-column>
          <el-table-column prop="reviewState" label="状态" width="150" align="center">
            <span slot-scope="scope">{{
              scope.row.reviewState == 0 || scope.row.reviewState == null
                ? "未确认"
                : "已确认"
            }}</span>
          </el-table-column>
          <el-table-column prop="reviewName" label="确认人" width="150" align="center">
          </el-table-column>
          <el-table-column fixed="right" label="操作" align="center" width="250">
            <template slot-scope="scope">
              <el-button v-if="scope.row.planState == 0 && scope.row.id != null && flag && scope.row.userId == userInfo.id" type="primary" plain
                size="mini" @click="updateSummary(scope.row)">修 改</el-button>
              <el-button v-if="scope.row.planState == 0 && scope.row.id != null && flag && scope.row.userId == userInfo.id" type="danger" plain size="mini"
                @click="deleteSummary(scope.row)">删 除</el-button>
              <el-button v-if="scope.row.id == null && flag" type="warning" plain size="mini"
                @click="empSummary(scope.row)">工作总结</el-button>
              <el-button v-show="userInfo.isLeader == 1 && scope.row.id != null" type="success" plain size="mini"
                @click="queren(scope.row)">
                {{ scope.row.reviewState == 0 ? "确认" : "取消确认" }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination background layout="total, sizes, prev, pager, next, jumper" v-if="pageObj"
          :page-size="pageObj.size" :total="pageObj.total" :current-page="pageObj.currentPage"
          @current-change="pageObj.func" @size-change="handleSizeChange" :page-sizes="[2, 5, 10, 15]">
        </el-pagination>
      </div>
    </div>

    <el-dialog :title="title" :visible.sync="dialogAddSummary" center width="40%">
      <el-form :model="form" :rules="summaryForm" ref="summaryRef">
        <el-form-item label="项目名称" :label-width="formLabelWidth">
          <el-input :disabled="true" type="text" v-model="form.projectName" style="width: 70%"></el-input>
        </el-form-item>

        <el-form-item label="工作内容" :label-width="formLabelWidth">
          <el-input :disabled="true" type="textarea" v-model="form.weekPlanMsg" style="width: 70%"></el-input>
        </el-form-item>

        <el-form-item label="计划日期" :label-width="formLabelWidth">
          <el-input :disabled="true" type="textarea" v-model="form.weekPartStrUpdate" style="width: 70%"></el-input>
        </el-form-item>

        <el-form-item label="完成百分比" :label-width="formLabelWidth" prop="projectPercentage">
          <el-input type="text" v-model="form.projectPercentage" style="width: 70%"></el-input>&#12288;%
        </el-form-item>
        <el-form-item label="工作状态" :label-width="formLabelWidth" prop="workState">
          <el-input type="text" v-model="form.workState" style="width: 70%"></el-input>
        </el-form-item>
        <el-form-item label="工作总结" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="form.weekSummaryMsg" style="width: 70%"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="SummaryUpdate('summaryRef')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  selectFunctionGroupList,
  empSummaryToBeConfirmed,
  empSummaryReview,
  personSummaryList,
  companyPlan,
  userProgressProjects,
  updateEmpSummary,
  empPlanAddSummary,
  deleteEmpSummary,
} from "@/service/Api";
export default {
  data() {
    return {
      tableData: [],
      period: "",
      projectId: "",
      fid: this.$route.query.fidId,
      groupsList: [],
      projectList: [],
      options: [],
      routeType: this.$route.query.type,
      name: this.$route.query.name,
      uid: this.$route.query.uid,
      groupName: this.$route.query.groupName,
      pn: 1,
      ps: 10,
      pageObj: {
        size: 10,
        total: 0,
        height: "75vh",
        currentPage: 1,
        func: (currentPage) => {
          this.pageTurning(currentPage);
        },
      },
      userInfo: "",
      formLabelWidth: "150px",
      dialogAddSummary: false,
      form: {},
      summaryForm: {
        projectPercentage: [
          { required: true, message: "请输入完成百分比", trigger: "blur" },
        ],
        workState: [
          { required: true, message: "请输入工作状态", trigger: "blur" },
        ],
      },
      flag: false,
      title: "",
      id: "",
    };
  },

  created() {
    this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
    if (this.userInfo.name == this.name) {
      this.flag = true;
    } else {
      this.flag = false;
    }
    if (this.routeType == 2) {
      this.chengeFid();
      this.groups();
    } else if (this.routeType == 1) {
      this.getProject();
      this.weekDate();
    }
  },

  methods: {
    weekDate() {
      companyPlan(-1).then((res) => {
        if (res.code == 0) {
          this.options = res.data;
          if (this.period == "") {
            this.period = res.data[0];
          }
          this.options.unshift("全部");
          this.seclet();
        }
      });
    },

    getProject() {
      userProgressProjects().then((res) => {
        if (res.code == 0) {
          this.projectList = res.data;
        }
      });
    },

    //获取职能组列表
    groups() {
      let userInfo = sessionStorage.getItem("userInfo");
      let id = JSON.parse(userInfo).id;
      selectFunctionGroupList(id).then((res) => {
        if (res.code == 0) {
          if (JSON.parse(userInfo).fid == 0) {
            this.groupsList = res.data;
            let list = [
              {
                id: 0,
                name: "所有职能组",
              },
            ];
            list.push(...res.data);
            this.groupsList = list;
          } else {
            this.groupsList = res.data;
          }
          this.groupsList.forEach((item) => {
            if (item.name == this.groupName) {
              this.fid = item.id;
            }
          });
        }
      });
    },
    datyMent() {
      this.$router.push({
        name: "weekly",
        params: {
          id: 40,
        },
      });
    },

    chengeFid() {
      let data = {
        fids: this.fid,
        pn: this.pn,
        ps: this.ps,
      };
      empSummaryToBeConfirmed(data).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.records;
          this.pageObj.total = res.data.total;
          this.pageObj.currentPage = res.data.current;
          this.pageObj.size = res.data.size;
        }
      });
    },

    updateSummary(row) {
      this.title = "修改总结";
      this.form = JSON.parse(JSON.stringify(row));
      this.form.weekPartStrUpdate = row.weekPartStr;
      this.id = this.form.id;
      this.dialogAddSummary = true;
    },
    SummaryUpdate(summaryRef) {
      if (this.title == "修改总结") {
        this.$refs[summaryRef].validate((valid) => {
          if (valid) {
            let data = {
              id: this.id,
              projectPercentage: this.form.projectPercentage,
              workState: this.form.workState,
              weekSummaryMsg: this.form.weekSummaryMsg,
              weekPlanId: this.form.weekPlanId,
            };
            updateEmpSummary(data).then((res) => {
              if (res.code == 0) {
                this.$message({
                  message: res.message,
                  type: "success",
                });
              }
              this.seclet();
              this.dialogAddSummary = false;
            });
          }
        });
      } else {
        this.$refs[summaryRef].validate((valid) => {
          if (valid) {
            let data = {
              projectPercentage: this.form.projectPercentage,
              workState: this.form.workState,
              weekSummaryMsg: this.form.weekSummaryMsg,
              weekPlanId: this.form.weekPlanId,
            };
            empPlanAddSummary(data).then((res) => {
              if (res.code == 0) {
                this.$message({
                  message: res.message,
                  type: "success",
                });
              }
              this.seclet();
              this.dialogAddSummary = false;
            });
          }
        });
      }
    },

    deleteSummary(row) {
      this.$confirm("确认删除此总结吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.id = row.id;
          deleteEmpSummary(this.id).then((res) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.seclet();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    empSummary(row) {
      this.title = "工作总结";
      this.form = JSON.parse(JSON.stringify(row));
      this.form.weekPartStrUpdate = row.weekPartStr;
      this.dialogAddSummary = true;
    },

    cancel() {
      this.dialogAddSummary = false;
    },

    seclet() {
      if (this.period == "全部") {
        this.period = "";
      }
      let data = {
        planDateStr: this.period,
        projectId: this.projectId,
        uId: this.uid,
        pn: this.pn,
        ps: this.ps,
      };
      personSummaryList(data).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.records;
          this.pageObj.total = res.data.total;
          this.pageObj.currentPage = res.data.current;
          this.pageObj.size = res.data.size;
        }
      });
    },

    queren(row) {
      if (row.id == null) {
        this.$message({
          message: "请先确认计划!",
          type: "warning",
        });
      } else {
        if (row.reviewState == 0 || row.reviewState == null) {
          let data = {
            id: row.id,
            state: 1,
          };
          empSummaryReview(data).then((res) => {
            if (res.code == 0) {
              this.$message({
                message: "已确认",
                type: "success",
              });
              if (this.routeType == 2) {
                this.chengeFid();
              } else if (this.routeType == 1) {
                this.seclet();
              }
            } else {
              this.$message({
                message: res.message,
                type: "warning",
              });
            }
          });
        } else {
          let data = {
            id: row.id,
            state: 0,
          };
          empSummaryReview(data).then((res) => {
            if (res.code == 0) {
              this.$message({
                message: "已取消确认",
                type: "success",
              });
              if (this.routeType == 2) {
                this.chengeFid();
              } else if (this.routeType == 1) {
                this.seclet();
              }
            } else {
              this.$message({
                message: res.message,
                type: "warning",
              });
            }
          });
        }
      }
    },

    //   翻页
    pageTurning(currentPage) {
      this.pageObj.currentPage = currentPage;
      this.pn = currentPage;
      if (this.routeType == 2) {
        this.chengeFid();
      } else if (this.routeType == 1) {
        this.seclet();
      }
    },
    handleSizeChange(val) {
      this.ps = val;
      if (this.routeType == 2) {
        this.chengeFid();
      } else if (this.routeType == 1) {
        this.seclet();
      }
    },
  },
};
</script>

<style>
.summaryLog {
  height: 100%;
}

.summaryLog-top {
  display: flex;
  padding: 20px 20px 0 20px;
}

.datalog {
  font-weight: bolder;
}

.datamet {
  cursor: pointer;
}

.datamet:hover {
  color: red;
}

.summaryLog_table {
  margin-top: 25px;
  margin-left: 100px;
}

.summaryLog_tableheader {
  display: flex;
  width: 90%;
  align-items: center;
  margin: 10px 20px 0 0px;
  padding: 10px 10px;
  border: 1px solid #e8eef5;
  background: #f9f9f9;
}

.titconet {
  width: 74%;
  text-align: center;
  font-size: 15px;
}

.titconet span:nth-child(1) {
  font-weight: bold;
  font-size: 23px;
}
</style>